import React, { Component } from 'react';
import { Form, Button, Badge, Modal, Row, Col, Input, Table } from 'antd';
import car from '../../assets/car.png';
import styles from './FormStyles.less';

const statusMap = ['default', 'processing', 'success', 'error'];
const status = ['待审核', '已审核', '已驳回'];
const FormItem = Form.Item;
@Form.create()
export default class SelectMat extends Component {
  state = {
    selectedRowKeys: [],
    selectedRows: {},
  };
  onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRows);
    this.setState({ selectedRowKeys, selectedRows });
  };

  getFormValue = () => {
    const { form } = this.props;
    const postvalue = {};
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const { entries } = Object;
      for (const [key, value] of entries(fieldsValue)) {
        if (value !== null && value !== undefined) {
          postvalue[key] = value;
        }
      }
    });
    return postvalue;
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    const postvalue = this.getFormValue();
    //console.log('values', postvalue);
    dispatch({
      type: 'rule/fetch',
      payload: postvalue,
    });
  };
  submit = () => {
    const { selectedRowKeys, selectedRows } = this.state;
    if (selectedRowKeys.length > 0) {
      const matId = selectedRowKeys[0];
      this.props.setMatId(matId, selectedRows[0].fileName);
    }
    this.props.handleModalVisible(false);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { modalVisible, handleModalVisible, rule } = this.props;
    const data = rule.list.length > 0 ? rule.list.filter(item => item.matAuditStatus === 1) : [];
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      type: 'radio',
    };
    const columns = [
      {
        title: '文件名',
        dataIndex: 'fileName',
      },
      {
        title: '缩略图',
        dataIndex: 'thumbnail',
        render: thumbnail => (
          <img src={thumbnail || car} style={{ width: 25, height: 25 }} alt="icon" size="small" />
        ),
      },

      {
        title: '创建时间',
        dataIndex: 'createTime',
        sorter: true,
      },
      {
        title: '审核状态',
        dataIndex: 'matAuditStatus',
        render(val) {
          return <Badge status={statusMap[val]} text={status[val]} />;
        },
      },
      {
        title: '作者',
        dataIndex: 'author',
        sorter: true,
      },
      {
        title: '单位',
        dataIndex: 'organName',
        sorter: true,
      },
    ];
    return (
      <Modal
        title="添加节目素材"
        visible={modalVisible}
        onOk={this.submit}
        width={1000}
        onCancel={() => handleModalVisible(false)}
      >
        <Form>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              <Form onSubmit={this.handleSearch}>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                  <Col span={6} md={4} sm={24}>
                    <FormItem>
                      {getFieldDecorator('fileName', {
                        rules: [{ required: false, message: '请输入素材名称!' }],
                      })(<Input placeholder="文件名称" />)}
                    </FormItem>
                  </Col>
                  <Col span={6} md={4} sm={24}>
                    <FormItem>
                      {getFieldDecorator('author', {
                        rules: [{ required: false, message: '请输入作者名称!' }],
                      })(<Input placeholder="作者名称" />)}
                    </FormItem>
                  </Col>
                  <Col span={6} md={4} sm={24}>
                    <FormItem>
                      {getFieldDecorator('organName', {
                        rules: [{ required: false, message: '请输入单位名称!' }],
                      })(<Input placeholder="单位名称" />)}
                    </FormItem>
                  </Col>

                  <Col span={6} md={3} sm={24}>
                    <span className={styles.submitButtons}>
                      <Button
                        type="primary"
                        htmlType="submit"
                        style={{ marginRight: 20 }}
                        onClick={this.handleSearch}
                      >
                        查询
                      </Button>
                    </span>
                  </Col>
                </Row>
              </Form>
            </div>
          </div>

          <Table rowKey="matId" rowSelection={rowSelection} dataSource={data} columns={columns} />
        </Form>
      </Modal>
    );
  }
}
